<template>
	<view>
		<q-field label="圈子类目" @click="jumpChooseTopicClass" type="select" :isClick="true" :required="true"
			:placeholder="cateName"></q-field>
		<q-field label="圈子名称" v-model="form.name" :required="true" placeholder="请填写圈子名称"></q-field>
		<q-field label="圈子介绍" type="textarea" v-model="form.description" :required="true" placeholder="请填写圈子介绍">
		</q-field>
		<!-- 提交按钮 -->
		<q-button shape="circle" @click="submit">提交</q-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cateName: '请选择圈子类目',
				form: {
					class_id: '',
					name: '',
					description: ''
				}
			};
		},
		computed: {
			userInfo() {
				return this.$store.state.userInfo
			}
		},
		onShow() {
			if (!this.userInfo) {
				uni.navigateTo({
					url: "/pages/user/login"
				})
			}
		},
		methods: {
			submit() {
				if (!this.form.name) {
					this.$u.toast('请填写圈子名称');
					return;
				}

				if (!this.form.description) {
					this.$u.toast('请填写圈子介绍');
					return;
				}

				this.$H.post('topic/topicSave', this.form).then(res => {
					if (res.code === 1) {
						this.$u.toast('成功创建圈子');
						uni.redirectTo({
							url: '/pages/topic/detail?id=' + res.data.id
						});
					}
				});
			},
			jumpChooseTopicClass() {
				uni.navigateTo({
					url: '/pages/topic/shoose-class'
				});
			}
		}
	};
</script>

<style>
	page {
		background-color: #fff;
	}

	.upload-wrap {
		padding: 30rpx;
	}
</style>
